<template>
  <div class="user-page">
    <div class="title">
      <div class="user-img">
        <img src="http://liufusong.top:8080/img/avatar.png" alt="背景">
        <div class="user-vai">
        <div class="user-myIcon">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="图标">
         </div>
          <div class="user-myusers">
            <div class="My_name">{{myUname}}</div>
            <div class="my_button_user">
               <van-button type="primary" size="mini"  @click="exit">退出</van-button>
            </div>
            <div class="My_edit">
              <font>编辑个人资料</font>
              <van-icon name="play" />
            </div>
          </div>
         </div>
      </div>
      <div class="my-am-grid">
        <div class="am-flexbox">
          <div class="am-flexbox-item" >
            <div class="am-grid-item-content" >
             <a href="#">
               <div class="My_menuItem">
                 <van-icon name="star-o" />
                 <span class="mycontent">我的收藏</span>
              </div>
             </a>
            </div>
          </div>
          <div class="am-flexbox-item">
              <div class="am-grid-item-content">
                <div class="My_menuItem"  >
                 <van-icon name="wap-home-o" />
                 <span class="mycontent">我的出租</span>
              </div>
              </div>
          </div>
          <div class="am-flexbox-item">
              <div class="am-grid-item-content"  >
                <div class="My_menuItem" >
                <van-icon name="underway-o" />
                 <span class="mycontent">看房记录</span>
              </div>
              </div>
          </div>
        </div>
         <div class="am-flexbox">
          <div class="am-flexbox-item" >
            <div class="am-grid-item-content" >
             <a href="#">
               <div class="My_menuItem">
                 <van-icon name="records" />
                 <span class="mycontent">成为房主</span>
              </div>
             </a>
            </div>
          </div>
          <div class="am-flexbox-item">
              <div class="am-grid-item-content">
                <div class="My_menuItem"  >
                 <van-icon name="user-circle-o" />
                 <span class="mycontent">个人资料</span>
              </div>
              </div>
          </div>
          <div class="am-flexbox-item">
              <div class="am-grid-item-content"  >
                <div class="My_menuItem" >
                <van-icon name="service-o" />
                 <span class="mycontent">联系我们</span>
              </div>
              </div>
          </div>
        </div>
      </div>
      <div class="My_ad">
        <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { delToken } from '@/utils/stroage'
export default {
  name: 'user-page',
  data () {
    return {
      myUname: ''
    }
  },
  async created () {
    this.myUname = localStorage.getItem('uname')
  },
  methods: {
    exit () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确认退出？'
      })
        .then(() => {
          this.$dialog({ message: '您已退出登录' })
          delToken()
          localStorage.removeItem('uname')
          this.$router.push('/user')
        })
        .catch(() => {
          // this.$dialog({ message: '已取消' })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.user-page {
  height: 100%;
.user-img{
    min-height: 300px;
    position: relative;
    img{
      width: 100%;
    }
    .user-vai{
    position: absolute;
    background: #fff;
    width: 75%;
    height: 65%;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto -70px;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    .user-myIcon{
    position: relative;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 5px solid #f5f5f5;
    display: inline-block;
    box-shadow: 0 2px 2px #bdbdbd;
    // background-color: transparent;
    }
    .user-myusers{
      padding-top: 15px;
      .My_name{
    margin-top: -38px;
    margin-bottom: 10px;
      }
  .My_edit{
   color: #999;
    font-size: 12px;
    margin-top: 20px;
      }
      .my_button_user{
        .van-button{
          border-radius: 10px;
          padding: 0 15px;
        }
      }
    }
  }
  }
.my-am-grid{
  margin-top: 10px;
  .am-flexbox {
    text-align: left;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background-color: inherit;
    background: #fff;
    justify-content: center;
     margin-bottom: 20px;
    .am-flexbox-item:first-child {
    margin-left: 0;
      }
    .am-flexbox-item{
    position: relative;
    box-sizing: border-box;
    flex: 1 1;
    .am-grid-item-content{
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 15px 0;

    .My_menuItem{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 13px;
    color: #333;
    .van-icon {
    font-size: 20px;
    margin-bottom: 10px;
    }
    }
    }
    }
  }
}
.My_ad{
  text-align: center;
  margin-top: 68px;
  img{
      width: 95%;
  }
}
}
</style>
